import React, { useContext, useState } from "react";
import { Button, Layout, Modal, Form, Input, message } from "antd";
import { FileList } from "./sider";
import Footer from "../../../component/footer";
import { ApiPage } from "./api";
import { PageContext, KeyContext } from "./context";
import { FolderAddOutlined } from "@ant-design/icons";
import { group } from "../vo/request";
import { Route } from "react-router-dom";
import { AllApi } from "./allapi";
import { PageHead } from "./contenthead";
import "./content.less";

const { Sider, Content } = Layout;

export function ApiApp() {
    const initPages = sessionStorage.getItem("pages") ? JSON.parse(sessionStorage.getItem("pages") as string) : false;
    const initNow = sessionStorage.getItem("now") ? JSON.parse(sessionStorage.getItem("now") as string) : false;
    const [pages, setPages] = useState(initPages ? initPages : [{ name: "全部接口", key: "allapi" }]);
    const [now, setNow] = useState(initNow ? initNow : { name: "全部接口", key: "allapi" });
    const [siderKey, setSiderKey] = useState(0);
    return (
        <Layout>
            <PageContext.Provider value={{ pages: pages, setPages: setPages as any, now: now, setNow: setNow }}>
                <Layout style={{ margin: "0 auto", minHeight: "90vh", width: "100%"}}>
                    <Sider
                        breakpoint="xl"
                        collapsedWidth={0}
                        className="pcy-sider"
                        width={300}
                        style={{
                            flexGrow: 1,
                            backgroundColor: "#fff",
                        }}
                    >
                        <KeyContext.Provider value={setSiderKey}>
                            <div style={{
                                height: 45,
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "flex-end"
                            }}>
                                <AddFileFolder />
                            </div>
                            <FileList key={siderKey}/>
                        </KeyContext.Provider>
                    </Sider>
                    <Content>
                        <div className="api-content">
                            <PageHead />
                            <Route path="/index/project/apis/allapi" component={AllApi}></Route>
                            <Route path="/index/project/apis/api:name" render={() => <ApiPage key={now.key} dataKey={now.key} />}></Route>
                        </div>
                    </Content>
                </Layout>
            </PageContext.Provider>
            <Footer></Footer>
        </Layout>
    )
}

function AddFileFolder() {
    const setSiderKey = useContext(KeyContext);
    const projectId = sessionStorage.getItem("project")
    const [isModalVisible, setModalVisible] = useState(false);
    const [isLoading, setLoading] = useState(false);
    const handleClick = (e: any) => {
        e.stopPropagation();
        console.log(e)
        setModalVisible(true);
    }
    const handleCancel = (e: any) => {
        e.stopPropagation();
        setModalVisible(false);
    }

    const onFinish = async (v: any) => {
        v.projectId = parseInt(projectId as string);

        try {
            setLoading(true);
            let res = await group.create(v);
            setLoading(false);
            if (res.data) {
                message.success(res.msg);
                setSiderKey((key:any) => {
                    return key + 1;
                })
                setModalVisible(false);
            } else {
                message.error(res.msg);
            }
        } catch (err) {
            setLoading(false);
            console.log(err)
        }
    }
    return (
        <>
            <Button
                type="link"
                onClick={handleClick}
            >
                <FolderAddOutlined size={20} style={{ fontSize: 20 }} />
            </Button>
            <Modal
                title="添加分组"
                visible={isModalVisible}
                onCancel={handleCancel}
                footer={[
                    <Button onClick={handleCancel} key="close">取消</Button>,
                    <Button form="addFileFolder" htmlType="submit" type="primary" key="submit" loading={isLoading}>提交</Button>
                ]}
                style={{ top: 300 }}
            >
                <Form
                    name="addFileFolder"
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="folderName"
                        rules={[{ required: true, message: "分组名不能为空" }]}
                        label="分组名"
                    >
                        <Input></Input>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}